<template>
    <div class='plist_list'  v-loading="loading" element-loading-text="拼命加载中..." element-loading-background="#fff">
        <el-card :style="{backgroundImage:'url('+ imgurl + ')'}">
            <div style="padding: 14px;">
                <p>{{desp}}</p>
            </div>
        </el-card>
        <el-table :data="songList" :show-header= false @row-click="openDetails">
            <el-table-column  label="">
                <template slot-scope="prope">
                    <span>{{prope.row.filename}}</span>
                </template>
            </el-table-column>
            <el-table-column width="60"> 
                <i class="el-icon-download"></i>  
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            imgurl : '',
            songList : [],
            loading : true,
            desp: '',
        };
    },
    beforeRouteEnter(to, from, next){
      next(vm=> {
        vm.getSongs();
        vm.$store.commit('showHead', true);
        vm.$store.commit('setHeadStyle', {'background': '#2CA2F9'});
      })
    },
    beforeRouteLeave(to, from, next){
        this.$store.commit('showHead', false);
        this.$store.commit('resetHeadStyle');
        next();
    },
    computed : {
        currentDate(){
            let time = new Date()
            let year = time.getFullYear()
            let month = time.getMonth() + 1
            let date = time.getDate()
            if(month < 10) month = '0' + month
            if(date < 10) date = '0' + date
            return `${year}-${month}-${date}`
        }
    },
    methods: {
        getSongs(){
            let infoID = this.$route.params.id;
            this.songList = [];
            this.$http.get(`/proxy/singer/info/${infoID}&json=true`).then(({data}) => {
                this.loading = false;
                const info = data.info;
                const songList = data.songs.list;
                this.imgurl = info.imgurl.replace('{size}', '400');
                this.songList = songList;
                 this.desp = info.intro;
                this.$store.commit('setHeadTitle', info.singername);
            }).catch((err) => {
                this.$message.error('网络波动，刷新下试试尼');
                this.loading = false;
                console.log(err);
            })
        },
        openDetails(row){

        }
    },
}
</script>
<style lang='scss' >
.plist_list .el-card{
    width: 100%;
    height: 350px;
    margin-top: -3px;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    .el-card__body{
        position: absolute;
        bottom: 0;
        left: 0;
        color: #fff;
        padding: 0;
        font-size: 18px;
        width: 100%;
        background: -webkit-linear-gradient(bottom,rgba(0,0,0,.6),rgba(0,0,0,0));
        p{
            line-height: 1.5;
            display: -webkit-box;
            overflow: hidden;
            white-space: normal!important;
            text-overflow: ellipsis;
            word-wrap: break-word;
            -webkit-line-clamp: 10;
            -webkit-box-orient: vertical;
        }
    }
}
.plist_list .el-icon-download{font-size: 26px}
</style>